<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/swiper.min.css" type="text/css" />
		
		<style>
			.swiper-container {
			    width: 800px;
			    height: 480px;
			}
			.swiper-container .swiper-wrapper .swiper-slide img{
				width: 800px;
				height: 480px;
			}
			
			.thumbs-container {
			    width: 800px;
			    height: 120px;
				margin: 0 auto;
				background: black;
				overflow: hidden;
			}
			
			.thumbs-container .swiper-wrapper{
				display: flex;
			}
			
			.thumbs-container .swiper-wrapper .swiper-slide{
				width: 192.5px;
				height: 100px;
				margin-top: 10px;
			}
			
			.thumbs-container .swiper-wrapper .swiper-slide img{
				width: 192.5px;
				height: 100px;
				margin-right: 10px;
				opacity:0.5;
			}
		</style>
		
		<script>
			window.onload = function()
			{
				let imgs = document.querySelector('.thumbs-container').querySelectorAll('img');
				imgs[0].style.opacity = 1;
				imgs.forEach(n => {
					n.onclick = function()
					{
						imgs.forEach(n => {
							n.style.opacity = 0.5;
						})
						n.style.opacity = 1;
					}
				})
			}
		</script>
		
		<script src="js/swiper.min.js"></script>
	</head>
	<body>
		<div id="main" class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="./img/resort1.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort2.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort3.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort4.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort5.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort6.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort7.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort8.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort9.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort10.jpg"/>
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<!-- <div class="swiper-pagination"></div> -->

			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>

			<!-- 如果需要滚动条 -->
			<!-- <div class="swiper-scrollbar"></div> -->
		</div>
		
		<div id="thumbs" class="thumbs-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="./img/resort1.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort2.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort3.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort4.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort5.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort6.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort7.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort8.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort9.jpg"/>
				</div>
				<div class="swiper-slide">
					<img src="./img/resort10.jpg"/>
				</div>
			</div>
		</div>
		
		<script>
			var thumbsSwiper = new Swiper ('#thumbs', {
				spaceBetween: 10,
				slidesPerView: 4,
				watchSlidesVisibility: true,//防止不可点击
			  })
			
			var mySwiper = new Swiper ('#main', {
				loop: true, // 循环模式选项
			
				thumbs: {
					swiper: thumbsSwiper,
				},
			
				// 如果需要前进后退按钮
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
					},
				})
		  </script>
	</body>
</html>